<template>
  <div class="all">
    <div class="search">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
    </div>
    <div class="history">
        
    </div>
    <div class="hot_search"></div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router'

const router = useRouter()
const value = ref('');
const onSearch = (val) => Toast(val);
const onCancel = () => {
  router.push('/')
}
</script>

<style lang="scss" scoped>
.all {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.search {
  //   width: 100%;
  margin: 0.1rem;
}

.history {
  width: 100%;
  height: 1.5rem;
  background-color: pink;
  margin: 0.1rem 0;
}

.hot_search {
  width: 100%;
  height: 1.5rem;
  background-color: pink;
  margin: 0.1rem 0;
}
</style>